<template>
    <div class="right-header">
        <div class="right-title">
            <h2>{{ audit.get('auditName') }}</h2>
            <span class="log-export" @click="exportLog">操作日志导出</span>
        </div>
        <div class="filters">
            <span>时间：</span>
            <el-date-picker
                v-model="queryOptions.dateValue"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
            ></el-date-picker>
            <span>操作人：</span>
            <el-select v-model="queryOptions.operator" placeholder="请选择">
                <el-option
                    v-for="item in options.operators"
                    :key="item.accountId"
                    :label="item.name"
                    :value="item.accountId"
                ></el-option>
            </el-select>
            <span>操作：</span>
            <el-select v-model="queryOptions.operate">
                <el-option
                    v-for="item in options.operations"
                    :key="item.operation"
                    :label="item.description"
                    :value="item.operation"
                ></el-option>
            </el-select>
            <span>搜索：</span>
            <el-input
                v-if="audit.get('auditName') !== '账号登录'"
                :class="{ 'search-box2': audit.get('auditName').length >= 6 }"
                v-model="queryOptions.queryText"
                :placeholder="options.placeholder"
            ></el-input>
            <el-button @click="search" type="primary">搜索</el-button>
            <el-button plain @click="reset">重置</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        /** 审计类型 */
        audit: {
            type: Map,
            required: true
        },
        /** 选项 */
        options: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            queryOptions: {
                /** 被选择操作人 */
                operator: '',
                /** 被选择的操作 */
                operate: '全部',
                /** 搜素内容字段 */
                queryText: '',
                /** 选择的日期 */
                dateValue: []
            }
        }
    },
    methods: {
        /** 重置
         * 除却重置内容外，还要将请求重置
         */
        reset() {
            Object.assign(this.$data, this.$options.data())

            // 重新请求
            this.$emit('query', {
                operator: '',
                operation: '',
                keyword: '',
                createTimeFrom: '',
                createTimeTo: ''
            })
        },

        /** 搜索
         * 将数据全部上抛，逻辑业务都在父组件完成
         */
        search() {
            // 整合请求参数
            const params = {
                operator: this.queryOptions.operator,
                operation:
                    this.queryOptions.operate === '全部'
                        ? ''
                        : this.queryOptions.operate,
                keyword: this.queryOptions.queryText,
                createTimeFrom: this.queryOptions.dateValue[0] || '',
                createTimeTo: this.queryOptions.dateValue[1] || ''
            }
            this.$emit('query', params)
        },

        /** 导出日志 */
        exportLog() {
            // 整合请求参数
            const params = {
                operator: this.queryOptions.operator,
                operation:
                    this.queryOptions.operate === '全部'
                        ? ''
                        : this.queryOptions.operate,
                keyword: this.queryOptions.queryText,
                createTimeFrom: this.queryOptions.dateValue[0] || '',
                createTimeTo: this.queryOptions.dateValue[1] || '',
                needAll: true
            }
            this.$emit('exportLog', params)
        }
    },
    watch: {
        audit() {
            // 切换audit，并重置显示
            Object.assign(this.$data, this.$options.data())
        }
    }
}
</script>

<style lang="less" scoped>
/* title */
.right-header {
    padding: 30px 0 30px 30px;
    border-bottom: 1px solid #e4e7ed;
}
.right-title {
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    .log-export {
        font-size: 14px;
        font-weight: 400;
        margin-top: 7px;
        color: #2489f2;
        cursor: pointer;
    }
}

/* 搜索栏 */
/deep/ .filters {
    font-size: 14px;
    margin-top: 30px;
    text-align: left;
    div {
        margin-bottom: 15px;
        margin-right: 20px;
    }
    .el-input {
        width: 120px;
        & + .el-button {
            margin-left: 10px;
        }
    }
    .search-box2 {
        width: 180px;
    }
}
</style>
